<template>
  <app-header></app-header>
  <div>
    <!-- 左半部分 -->
    <div class="login-left">
      <div class="login-form">
          <br>
          <!-- 向左的按钮 -->
          <div class="right_button" @click="toLoginPage">
            <div>
              <img src="@/assets/point_to_left.png" alt=""  class="right_arrow">
            </div>
          </div>
          <form action="">
            <p style="font-size: 30px;font-family: '黑体';">注册</p>
            <div style="margin-top: 7%;">
              <p class="user_name_text">用户名</p>
              <input type="text" name="用户名" id="username" class="user_name_input">
            </div>
            
            <div style="margin-top: 7%;">
              <p class="password_text">密码</p>
              <input type="password" name="密码" id="password" class="password_input">
            </div>

            
            <div style="margin-top: 7%; width: 30%;">
              <p class="confirm_text">验证码</p>
              <input type="text" name="验证码" id="confrim_code" class="confrim_code">
            </div>

            <div style="margin-top: 10%;">
              <button class="register-confirm">完成注册</button>
            </div>
            <div style="margin-top: 10%;"></div>
          </form>
        </div>
          
    </div>
    <!-- 右半部分 -->
    <div class="login-right">
      <img src="@/assets/register-right-pic.png" alt="加入我们吧！" class="join_us">
      <img src="@/assets/login-pagetail.png" alt="图片加载失败" class="login-pagetail">
    </div>
  
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
export default {
  components: { AppHeader },
  methods:{
    toLoginPage(){
      window.location.href = "/login"
    }
  }
}
</script>

<style>
/* 左半部分 */
.login-left{
  width: 50%;
}
/* 右半部分 */
.login-right{
  float: right;
  width: 50%;
}
/* 登录表单 */
.login-form{
  width: 60%;
  border: 40px solid rgb(255, 213, 21);
  border-radius: 8px;
  background-color: rgb(255, 252, 246);
  margin-top: 5%;
  margin-bottom: 5%;
  margin-left: 15%;
  box-shadow:  1.3px 6.6px 6.6px hsl(0deg 0% 0% /0.20);
  text-align: center;
}

/* 完成注册 */
.register-confirm{
  background-color: rgb(255, 213, 21);
  border-radius: 10px;
  border: 0px;
  width: 35%;
  font-size: 190%;
}
/* 用户名（小字） */
.user_name_text{
  position: absolute;
  margin-top: -0.5%;
  margin-left: 6%; 
  background-color: rgb(255, 252, 246);
}
/* 用户名（输入框） */
.user_name_input{
  width: 70%; 
  height: 40px; 
  border-radius: 10px; 
  background-color: rgb(255, 252, 246);
}
/* 密码（小字） */
.password_text{
  position: absolute; 
  margin-top: -0.5%;
  margin-left: 6%; 
  background-color: rgb(255, 252, 246);
}
/* 密码（输入框） */
.password_input{
  width: 70%; 
  height: 40px; 
  border-radius: 10px; 
  background-color: rgb(255, 252, 246);
}
/* 验证码（输入框） */
.confrim_code{
  margin-left: 50%;
  width: 80%; 
  height: 40px; 
  border-radius: 10px; 
  background-color: rgb(255, 252, 246);
}
/* 验证码（小字） */
.confirm_text{
  position: absolute; 
  margin-top: -0.5%;
  margin-left: 6%; 
  background-color: rgb(255, 252, 246);
}
/* 忘记密码的文字 */
.forget_password_text{
  color: rgb(93, 160, 236);  
  margin-left: 60%;
}
/* 表单里那个向左的箭头 */
.logout_img{
  position: absolute;
  margin-left: -16%;
  width: 2.8%;
}
/* 加入我们吧 */
.join_us{
  position: absolute;
  top: 45%; 
  margin-left: 15%; 
  width: 18%;
}
/* 右下角图片 */
.login-pagetail{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  
}


/* 向左的按钮 */
.right_button{
  width: 7%;
  height: 7%;
  background: #FFD515;
  border-radius: 100%;
  margin-left: 3%;
}
/* 向左的按钮 */
.right_button:hover{
  width: 7%;
  height: 7%;
  background: #f3c708;
  border-radius: 100%;
  margin-left: 3%;
}
/* 向左的按钮 */
.right_button:active{
  width: 7%;
  height: 7%;
  background: #FFD515;
  border-radius: 100%;
  margin-left: 3%;
}
/* 按钮里的箭头 */
.right_arrow{
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
}

/* 响应式布局 */
@media screen and (max-width: 824px) {
  .login-pagetail,.join_us{
    visibility: hidden;
  }
  
  .login-form{
    margin:auto;
    position: absolute;
    top: 20%;  
    margin-left: 7%;
    margin-right: 7%;
    width: 70%;
    border: 30px solid rgb(255, 213, 21);
  }
  .logout_img{
    margin-left: -48%;
    width: 8.8%;
  }
  .user_name_text{
    margin-left: 20%;
    margin-top: -2%;
  }
  .password_text{
    margin-left: 20%;
    margin-top: -2%;
  }
  .confirm_text{
    margin-left: 20%;
    margin-top: -2%;
  }
  .register-confirm{
    font-size: 140%;
  }
}
@media screen and (max-width: 1100px){
  .register-confirm{
    font-size: 140%;
  }
}
@media screen and (max-width: 420px){
  .register-confirm{
    font-size: 100%;
  }
}
@media screen and (max-height:610px){
  .login-pagetail{
    visibility: hidden;
  }
}
@media screen and (max-height:250px){
  .join_us{
    visibility: hidden;
  }
}
</style>
